import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { DefaultValueComponent } from './default-value/default-value.component';
import { SizeComponent } from './size/size.component';
import { TriggerComponent } from './trigger/trigger.component';
import { CustomizeComponent } from './customize/customize.component';
import { FilterComponent } from './filter/filter.component';
import { MultipleComponent } from './multiple/multiple.component';
import { DisabledComponent } from './disabled/disabled.component';

export const CascaderConfig: CaseConfigType = {
  location: 'Cascader',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/cascader/basic/basic.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '省市区级联。',
      demoDescription_en: 'Provincial and municipal cascades.',
    },
    {
      demo: DefaultValueComponent,
      codePath: 'showcase/cascader/default-value/default-value.component',
      demoTitle: '默认值',
      demoTitle_en: 'default-value',
      demoDescription: '默认值通过数组的方式指定。',
      demoDescription_en: 'The default value is specified by means of an array.',
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/cascader/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'Size',
      demoDescription: '有 large 和 default 两种尺寸，高度分别为 40px 和 32px。',
      demoDescription_en: 'Available in large and default sizes with heights of 40px and 32px respectively.',
    },
    {
      demo: TriggerComponent,
      codePath: 'showcase/cascader/trigger/trigger.component',
      demoTitle: '自定义触发器',
      demoTitle_en: 'Customize trigger',
      demoDescription: '切换按钮和结果分开。',
      demoDescription_en: 'Toggle buttons and results are separated.',
    },
    {
      demo: CustomizeComponent,
      codePath: 'showcase/cascader/customize/customize.component',
      demoTitle: '自定义级联选择',
      demoTitle_en: 'Customize cascader',
      demoDescription: '自定义已选项、header、footer、content。',
      demoDescription_en: 'Customize selection、header、footer、content.',
      devDebug: true,
    },
    {
      demo: FilterComponent,
      codePath: 'showcase/cascader/filter/filter.component',
      demoTitle: '搜索',
      demoTitle_en: 'Filter',
      demoDescription: '直接搜索选项并选择。',
      demoDescription_en: 'Search for options directly and select.',
      devDebug: true,
    },
    {
      demo: MultipleComponent,
      codePath: 'showcase/cascader/multiple/multiple.component',
      demoTitle: '多选',
      demoTitle_en: 'Multiple',
      demoDescription: '省市区级联。',
      demoDescription_en: 'Provincial and municipal cascades.',
    },

    {
      demo: DisabledComponent,
      codePath: 'showcase/cascader/disabled/disabled.component',
      demoTitle: '禁用',
      demoTitle_en: 'disabled',
      demoDescription: '禁用选择框和禁用选项。',
      demoDescription_en: 'Disable the selection box and disable the option.',
    },
  ],
  mApi: [
    {
      selector: 'lv-cascader',
      snippet: `<lv-cascader style="width: 368px" [lvOptions]="\${1:options}" [(ngModel)]="\${2:values}" (ngModelChange)="\${3:onChanges($event)}" "></lv-cascader>`,
      name: 'lv-cascader',
      name_en: 'lv-cascader',
      api: [
        {
          attribute: 'lvOptions',
          type: 'CascaderOption[]',
          default: '[]',
          description: `源数据。CascaderOption 属性如下：
            <ul>
              <li>[key: any] 选项的关键key，具有唯一性 (可选)</li>
              <li>[label: any] 选项显示的名称 (必选)</li>
              <li>[value: any] 选项的value值 (必选)</li>
              <li>[isLeaf: boolean] 该选项是否是子选项 (可选)</li>
              <li>[children: CascaderOption[]] 子选项 (可选)</li>
              <li>[disabled: boolean] 选项是否禁用，默认值 false (可选)</li>
              <li>[indeterminate: boolean] 选项是否半选，默认值 false (可选)</li>
            </ul>
          `,
          description_en: `Options data. The CascaderOption properties are as follows:
            <ul>
              <li>[key: any] The key of the option, unique (optional)</li>
              <li>[label: any] The name of the option (required)</li>
              <li>[value: any] Option value (required)</li>
              <li>[isLeaf: boolean] Whether the option is a sub-option (optional)</li>
              <li>[children: CascaderOption[]] Sub option (optional)</li>
              <li>[disabled: boolean] Whether the option is disabled, the default value is false (optional)</li>
              <li>[indeterminate: boolean] Whether the option is half-selected, the default value is false (optional)</li>
            </ul>
          `,
        },
        {
          attribute: 'lvPlaceholder',
          type: 'string',
          default: '',
          description: `占位符`,
          description_en: ``,
        },
        {
          attribute: 'lvTrigger',
          type: `'click' | 'hover'`,
          default: 'click',
          description: `下拉面板触发方式`,
          description_en: ``,
        },
        {
          attribute: 'lvSize',
          type: `'large' | 'default'`,
          default: 'default',
          description: `尺寸大小`,
          description_en: ``,
        },
        {
          attribute: 'lvDisabled',
          type: `boolean`,
          default: 'false',
          description: `是否禁用`,
          description_en: ``,
        },
        {
          attribute: 'lvMode',
          type: `'single' | 'multiple'`,
          default: 'single',
          description: `选择模式，默认单选`,
          description_en: ``,
        },
        {
          attribute: 'lvShowClear',
          type: `boolean`,
          default: 'false',
          description: `是否显示清除按钮`,
          description_en: ``,
        },
        {
          attribute: 'lvShowFilter',
          type: `boolean`,
          default: 'false',
          description: `是否展示过滤【暂未实现】`,
          description_en: ``,
        },
        {
          attribute: 'lvFilterFocus',
          type: `boolean`,
          default: 'true',
          description: `过滤输入框自动聚焦【暂未实现】`,
          description_en: ``,
        },
        {
          attribute: 'lvShowPath',
          type: `boolean`,
          default: 'true',
          description: `是否显示选中项完整路径`,
          description_en: ``,
        },
        {
          attribute: 'lvChangeOnSelect',
          type: `boolean`,
          default: 'false',
          description: `点击每层选项时，值都会发生变化，允许选择父级选项`,
          description_en: ``,
        },
        {
          attribute: 'lvTrackBy',
          type: `TrackByFunction<any>`,
          default: '',
          description: `内容列表trackBy`,
          description_en: ``,
        },
      ],
      event: [
        {
          event: 'lvOpenChange',
          parameter: `boolean`,
          description: `下拉面板展开关闭变更回调事件`,
          description_en: `Pull panel expand and close change callback event`,
        },
        {
          event: 'lvClearChange',
          parameter: ``,
          description: `清除全部选项时回调事件`,
          description_en: `Callback event when all options are cleared`,
        },
        {
          event: 'lvFilterChange',
          parameter: `string`,
          description: `搜索文本框变化时回调事件`,
          description_en: `Callback event when the search text box changes`,
        },
        {
          event: 'ngModelChange',
          parameter: `Array<\ number | \string> | Array<\ number | \string>[] | null`,
          description: `选择状态变化时的回调函数，参数为选中项`,
          description_en: `The callback function when the selection state changes, and the parameter is the selected item`,
        },
        {
          event: 'lvSelectionChange',
          parameter: `CascaderOption[]`,
          description: `选择状态变化时的回调函数。参数为选中项（对象类型）`,
          description_en: `Callback function when selection state changes. The parameter is the selection (object type)`,
        },
      ],
    },
  ],
};
